import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {
  state = {
    list: [
      { id: 1, title: 'message1', con: '消息内容1' },
      { id: 2, title: 'message2', con: '消息内容2' },
      { id: 3, title: 'message3', con: '消息内容3' }
    ]
  }
  render() {
    const { list } = this.state
    return (
      <div>
        <ul>
          {list.map((item) => {
            return (
              <li key={item.id}>
                {/* 向注册路由传递 search 参数 */}
                <Link
                  to={`/home/message/detail?id=${item.id}&title=${item.title}&con=${item.con}`}
                >
                  {item.title}
                </Link>
              </li>
            )
          })}
        </ul>
        {/* 注册路由，接收 search 参数不需要修改，正常注册路由即可 */}
        <Route path="/home/message/detail" component={Detail} />
      </div>
    )
  }
}
